<template>
  <div class="certification">
    <top-bar :title="'防沉迷认证'"/>
    <div class="content">
      <div class="instruction">
        <span>{{ instruction }}</span>
      </div>
      <div class="info-name" style="margin-top: 0.2rem;">
        <label>姓名</label>
        <el-input v-model="realname" placeholder="请输入姓名" :disabled="edit_status"></el-input>
      </div>
      <div class="info-credentials">
        <label>证件</label>
        <el-select v-model="value" :disabled="edit_status">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="info-card">
        <label>身份证</label>
        <el-input v-model="idcard" placeholder="请输入身份证号码" :disabled="edit_status"></el-input>
      </div>
      <div class="submit" @click="submit" v-if="!edit_status">
        <button>提交</button>
      </div>
      <div class="disabled" v-else-if="in_identify" disabled="">
        <button>已提交认证，请耐心等待</button>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from './topBar'

export default {
  name: 'certification',
  components: {
    topBar
  },
  data () {
    return {
      instruction: '应国家相关互联网法律法规和要求规定，游戏用户需完成实名身份认证，此认证仅作为未成年人防沉迷用途',
      realname: this.$store.state.userDetail.real_name,
      idcard: this.$store.state.userDetail.id_card,
      options: [
        {
          value: 1,
          label: '身份证'
        },
      ],
      value: 1
    }
  },
  computed: {
    actionStatus () {
      return this.$store.state.actionStatus
    },
    failMsg () {
      return this.$store.state.failMsg
    },
    edit_status () {
      if (this.$store.state.userDetail.has_identify == 2 || this.$store.state.userDetail.has_identify == 3) {
        return 1//不能编辑
      }
      return 0//可以编辑
    },
    in_identify () {
      if (this.$store.state.userDetail.has_identify == 3) {
        return 1//认证中
      }
      return 0
    }
  },
  watch: {
    failMsg () {
      this.failMsg && this.Toast(this.failMsg, 500)
    },
    actionStatus() {
      if (this.$store.state.userDetail.has_identify == 2) {
        this.Toast('实名认证成功', 500)
      } else if (this.$store.state.userDetail.has_identify == 3) {
        this.Toast('已提交认证，请耐心等待', 500)
      }
    }
  },
  methods: {
    submit () {
      let realname = this.realname.trim()
      let idcard = this.idcard.trim()
      if (!realname) {
        this.Toast('请输入真实姓名', 500)
        return false
      } else if (!idcard) {
        this.Toast('请输入证件号码', 500)
        return false
      } else {
        this.$store.dispatch('setIdentify', {
          realname,
          type: this.value,
          idcard
        })
      }
    }
  },
  created () {
    if (this.actionStatus == true) {
      this.$store.dispatch('setIdentify', {
        realname: this.realname,
        type: this.value,
        idcard: this.idcard
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.certification {
  padding: 0.75rem 0.48rem;

  .content::-webkit-scrollbar {
    width: 0 !important
  }

  .content {
    margin-top: 0.61rem;
    height: 8.3rem;
    overflow: scroll;

    .info-name, .info-card, .info-credentials {
      height: 1.39rem;
      display: flex;
      align-items: center;
      margin-bottom: 0.37rem;
      padding-left: 0.4rem;

      > label {
        width: 1.51rem;
        font-size: 0.32rem;
        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
        font-weight: bold;
        color: #363739;
      }

      /deep/ .el-input__inner {
        height: 1.39rem;
        border: none;
        padding-left: 0.4rem;
        border-radius: 0.21rem;
        font-size: 0.32rem;
      }

      /deep/ .el-select {
        width: 100%;
      }
    }

    .instruction {
      width: 100%;
      height: 1.39rem;

      span {
        display: block;
        padding-left: 0.4rem;
        height: 1.17rem;
        font-size: 0.32rem;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #363739;
        line-height: 0.59rem;
      }
    }

    .info-card {
      margin-bottom: 0;
    }

    .submit {
      padding: 0 0.45rem;

      button {
        margin-top: 0.3rem;
        width: 8.13rem;
        height: 1.0rem;
        background: #FF751A linear-gradient(90deg, #FF0000 0%, #FFD500 100%);
        border-radius: 0.67rem;
        font-size: 0.45rem;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #FFFFFF;
      }
    }

    .disabled {
      padding: 0 0.45rem;

      button {
        margin-top: 0.3rem;
        width: 8.13rem;
        height: 1.0rem;
        background: gray;
        border-radius: 0.67rem;
        font-size: 0.45rem;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }
}
</style>
